﻿<DemoPageSectionComponent Id="DataGrid-ColumnChooser-ShowInColumnChooser" ShowHorizontalScrollBar="true">
    @inject NwindDataService NwindDataService

    @if(Products == null) {
        <p><em>Loading...</em></p>
    } else {
        <DxDataGrid Data="@Products" AllowColumnDragDrop="false">
            <HeaderTemplate>
                <DxToolbar>
                    <DxDataGridColumnChooserToolbarItem Alignment="ToolbarItemAlignment.Right" />
                </DxToolbar>
            </HeaderTemplate>
            <Columns>
                <DxDataGridColumn Field="@nameof(Product.ProductName)" ShowInColumnChooser="false" />
                <DxDataGridComboBoxColumn Field="@nameof(Product.CategoryId)" Caption="Category"
                                          Data="@Categories" TextFieldName="@nameof(Category.CategoryName)" ValueFieldName="@nameof(Category.CategoryId)" />
                <DxDataGridSpinEditColumn Field="@nameof(Product.UnitPrice)" DisplayFormat="c" Width="120px" />
                <DxDataGridSpinEditColumn Field="@nameof(Product.UnitsInStock)" Width="120px" />
                <DxDataGridColumn Field="@nameof(Product.QuantityPerUnit)" />
                <DxDataGridCheckBoxColumn Field="@nameof(Product.Discontinued)" Width="120px" />
            </Columns>
        </DxDataGrid>
    }
    @code {
        IEnumerable<Product> Products { get; set; }
        IEnumerable<Category> Categories { get; set; }

        protected override async Task OnInitializedAsync() {
            Products = await NwindDataService.GetProductsAsync();
            Categories = await NwindDataService.GetCategoriesAsync();
        }
}
</DemoPageSectionComponent>
